<template>
  <!-- 表格 -->
  <Table :table="dynamicTable" :tableData="list">
    <template #name="{ index }">
      <el-input v-model="list[index].name" placeholder="请输入" />
    </template>
    <template #description="{ index }">
      <el-input v-model="list[index].description" type="textarea" :rows="3" placeholder="请输入" />
    </template>
    <template #img_url="{ index }">
      <!-- 图片组件 -->
      <uploadImg v-model:imgUrl="list[index].img_url" />
    </template>
    <template #operation="{ index }">
      <el-popconfirm title="是否确定删除" @confirm="del(index)">
        <template #reference>
          <el-button type="text" link>删除</el-button>
        </template>
      </el-popconfirm>
    </template>
  </Table>
  <el-button style="width: 100%;margin-top: 20px;" text @click="addTableList"> + 添加选项</el-button>
</template>

<script setup>
import Table from '@/components/Table/table'
import { dynamicTable } from '@/hooks/ticket/index.js'
import uploadImg from '@/components/Table/uploadImg.vue'
import { ref, watch } from 'vue'
// =================================================================
// 表格数据
const unitLine = {
  name: '',
  description: '',
  img_url: ''
}
// 定义出入数据
const props = defineProps({
  tableList: {
    type: Array,
    default: []
  }
})
// 定义传出方法
const emit = defineEmits(['update:tableList'])

const list = ref([])
// 监听传入数据变化
watch(() => props.tableList, () => {
  list.value = props.tableList
}, { immediate: true, deep: true })
// 监听传出数据变化
watch(list, () => {
  emit('update:tableList', list)
}, { deep: true })
// 添加表格
const addTableList = () => {
  list.value.push({ ...unitLine })
}

// 删除
const del = (index) => {
  // console.log(row);
  list.value.splice(index, 1)
}
</script>

<style lang="scss" scoped></style>